<template>
	<view class="full-screen" style="background-color:black;">
		<swiper
			class="full-parent absolute"
			style="left: 0;top: 0;"
			:autoplay="false"
			:current="current"
			@change="onChange"
		>
			<swiper-item v-for="(item,i) in urls" :key="i" class="full-parent">
				<image
					v-if="item.type===2"
					:src="item.content"
					:show-menu-by-longpress="true"
					class="full-parent"
					mode="aspectFit"
				></image>
				<video
					v-else-if="item.type===3"
					id="video"
					ref="videoRef"
					:autoplay="current===i"
					:src="item.content"
					class="full-parent"
					@play="onPlay"
					@pause="onPause"
				></video>
			</swiper-item>
		</swiper>
		<uni-nav-bar
			ref="navBar"
			fixed
			statusBar
			backgroundColor="tranparent"
			:border="false"
			@clickLeft="goBack"
		>
			<view class="flex center w-full fs-16"><text class="text-white">{{title}}</text></view>
			<template v-slot:left>
				<image class="size-32" src="@/static/svg/icon-popup-close.svg" />
			</template>
		</uni-nav-bar>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		getCurrentInstance,
		computed
	} from 'vue'

	const instance = getCurrentInstance()

	const current = ref(0)
	const urls = ref([])
	const videoRef = ref(null)
	const playing = ref(false)
	
	const onPlay = () => {
		playing.value = true
	}
	
	const onPause = () => {
		playing.value = false
	}
	
	const title = computed(() => {
		return urls.value && urls.value.length ? `${current.value + 1}/${urls.value.length}` : ''
	})
	
	const goBack = () => uni.navigateBack()
	
	const onChange = ({ detail }) => {
		current.value = detail.current

		const query = uni.createSelectorQuery().in(instance)
		query.select('#video')
			.boundingClientRect((data) => {
				if (playing.value) {
					uni.createVideoContext('video', instance).pause()
				}
			})
			.exec()
	}

	onLoad(() => {
		const eventChannel = instance.ctx.getOpenerEventChannel()
		eventChannel.on('acceptDataFromOpenerPage', (data) => {
			current.value = data.current
			urls.value = data.urls && [...data.urls] || []
		})
	})
</script>